<template>
  <div class="plan">
    <!-- 出行日期 -->
    <van-row justify="space-between">
      <van-col offset="1" span="10">
        <h2>出行计划</h2>
      </van-col>
      <van-col span="4">
        <van-icon name="cross" size="20" @click="deletePlan" />
      </van-col>
    </van-row>
    <van-cell-group>
      <van-field
        label="我也要去："
        :model-value="destination"
        placeholder="目的地"
        update:model-value="destinationChange"
      />
      <van-cell
        title="选择日期区间"
        :value="date"
        @click="showDate = true"
        update:model-value="dateChange"

      />
    </van-cell-group>
    <van-calendar v-model:show="showDate" type="range" @confirm="dateConfirm" />
    <!-- 天气+建议穿着 -->
    <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
      天气及推荐穿着
    </van-notice-bar>
    <!-- 出行方式 -->
    <van-row justify="space-between">
      <van-col span="18">
        <van-cell
          is-link
          @click="showDevice = true"
          :value="device"
          title="出行方式"
        ></van-cell>
        <van-action-sheet
          v-model:show="showDevice"
          :actions="devices"
          @select="deviceSelect"
          cancel-text="取消"
          close-on-click-action
          @cancel="deviceCancel"
        />
      </van-col>
      <van-col span="6">
        <van-button
          :disabled="deviceAble"
          type="primary"
          size="small"
          text="去购票"
          @click="getTicket"
        />
      </van-col>
    </van-row>
    <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
      出行信息
    </van-notice-bar>
    <!-- 住宿 -->
    <van-row justify="space-between">
      <van-col span="18">
        <van-cell
          is-link
          @click="showAccommodation = true"
          title="出行住宿"
          :value="accommodation"
        ></van-cell>
        <van-action-sheet
          v-model:show="showAccommodation"
          :actions="accommodations"
          @select="accommodationSelect"
          cancel-text="取消"
          close-on-click-action
          @cancel="accommodationCancel"
        />
      </van-col>
      <van-col span="6">
        <van-button
          :disabled="accommodationAble"
          type="primary"
          size="small"
          text="去预定"
          @click="getAccommodation"
        />
      </van-col>
    </van-row>
    <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
      住宿信息
    </van-notice-bar>
    <hr />
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  props: {
    destination: String,
    // formatDay: String,
    date: String,
  },
  data: function () {
    return {
      // destination: "",
      accommodation: "",
      // date: "",
      // formatDay: "",
      device: "",
      showDate: false,
      showDevice: false,
      showAccommodation: false,
      deviceAble: true,
      accommodationAble: true,
      // button0: "去购票",
      devices: [
        { name: "公共交通" },
        { name: "私人交通" },
        { name: "一会儿再决定" },
      ],
      accommodations: [
        { name: "酒店民宿" },
        { name: "私人住所" },
        { name: "一会儿再决定" },
      ],
    };
  },
  methods: {
    deletePlan() {
      let that = this;
      that.$dialog
        .confirm({
          title: "",
          message: "确认删除该计划",
          confirmButtonColor: "red",
        })
        .then(() => {
          // console.log('点击了确认')
        })
        .catch(() => {
          // console.log('点击了取消')
        });
    },
    formatDate(date) {
      let that = this;
      that.formatDay = `${date.getMonth() + 1}/${date.getDate()}`;
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    dateConfirm(date) {
      let that = this;
      const [start, end] = date;
      that.show = false;
      that.date = `${that.formatDate(start)} - ${that.formatDate(end)}`;
      that.showDate = false;
    },
    deviceSelect(item) {
      let that = this;
      that.device = item.name;
      if (item.name == "公共交通") {
        that.deviceAble = false;
      } else {
        that.deviceAble = true;
      }

      that.showDevice = false;
    },
    deviceCancel() {
      let that = this;
      that.showDevice = false;
    },
    getTicket() {
      Toast.success("购票成功");
    },
    accommodationSelect(item) {
      let that = this;
      that.accommodation = item.name;
      if (item.name == "酒店民宿") {
        that.accommodationAble = false;
      } else {
        that.accommodationAble = true;
      }
      that.showAccommodation = false;
    },
    accommodationCancel() {
      let that = this;
      that.showAccommodation = false;
    },
    getAccommodation() {
      Toast.success("预定成功");
    },
    destinationChange(props, centext, e) {
      centext.emit("update:destination", e.target.value);
    },
    dateChange(props, centext, e) {
      centext.emit("update:date", e.target.value);
    },
    // formatDayChange(props, centext, e) {
    //   centext.emit("update:formatDay", e.target.value);
    // },
  },
};
</script>

<style scoped>
.plan {
  padding: 10px 13px;
  /* position: relative; */
}

.van-icon {
  top: 16px;
}

.van-button--small {
  width: 70px;
  top: 6px;
}
</style>
